import 'package:flutter/material.dart';
import 'package:hxdj/common/base_page/my_loading_page.dart';
import 'package:hxdj/common/components/my_smart_refresher.dart';
import 'package:hxdj/common/components/my_tap_widget.dart';
import 'package:hxdj/common/components/my_text.dart';
import 'package:hxdj/common/my_header_global.dart';
import 'package:hxdj/common/routers/navigator.dart';
import 'package:hxdj/home/recommend_technician/recommend_technician_viewmodel.dart';

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:hxdj/home/technician_detail.dart/technician_detail_page.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

//推荐技师
class RecommendTechnicianPage extends StatefulWidget {
  static String routeName = "/RecommendTechnicianPage";

  const RecommendTechnicianPage({super.key});

  @override
  State<RecommendTechnicianPage> createState() => _RecommendTechnicianPageState();
}

class _RecommendTechnicianPageState extends State<RecommendTechnicianPage> with AutomaticKeepAliveClientMixin {
  //viewModel
  RecommendTechnicianViewModel? viewModel;


  RefreshController refreshController = RefreshController();

  ScrollController scrollController = ScrollController();
@override
  bool get wantKeepAlive => true;


  _buildBody() {
    switch (viewModel?.state) {
      case ViewState.loading:
        return const MyLoadingWidget();
      default:

        //刷新完成
        refreshController.refreshToIdle();
        refreshController.loadComplete();

        if (!viewModel!.isHave) {
          //无更多数据
          refreshController.loadNoData();
        }

        return MySmartRefresher(
            controller: refreshController,
            scrollController: scrollController,
            noMoreData: !viewModel!.isHave,
            onRefresh: () {
              viewModel?.requestData(isCleanDate: true);
            },
            onLoading: () {
              viewModel?.requestData();
            },
            enablePullUp: true,
            enablePullDown: true,
            customChildWidget: SingleChildScrollView(
              child: StaggeredGrid.count(
                crossAxisCount: 2,
                axisDirection: AxisDirection.down,
                children: viewModel!.dataList.map((e) {
                  return StaggeredTechnicalItem(e: e);
                }).toList(),
              ),
            ));
    }
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return BasePage<RecommendTechnicianViewModel>(
        onModelReady: (model) {
          viewModel = model;
          // 页面初始化完成后的回调
          viewModel?.requestData(isFresh: true, isCleanDate: true);
        },
        viewModel: RecommendTechnicianViewModel(),
        builder: (BuildContext context, RecommendTechnicianViewModel? model, Widget? child) {
          return Scaffold(
              backgroundColor: MyColours.materialBg, appBar: const MyAppBar(title: "推荐技师"), body: _buildBody());
        });
  }
}

class StaggeredTechnicalItem extends StatelessWidget {
  final TechnicianModel e;

  const StaggeredTechnicalItem({super.key, required this.e});

  @override
  Widget build(BuildContext context) {
    return MyTapWidget(
      onTap: () {
        NavigatorUtils.pushParams(context, "${TechnicianDetailPage.routeName}?tId=${e.tId}");
      },
      child: Container(
          margin: EdgeInsets.only(left: 10.w, right: 5.w, bottom: 10.h),
          child: MyBorder(
              decoration: MyBorder.defaultDecoration,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  //图片
                  ClipRRect(
                      //圆角图片
                      borderRadius:
                          BorderRadius.only(topLeft: Radius.circular(11.0.w), topRight: Radius.circular(11.0.w)),
                      child: MyCachedNetworkImage(
                        key: ValueKey(e.imgs?.first ?? ""),
                        imageUrl: e.imgs?.first ?? "",
                        fit: BoxFit.cover,
                      )),

                  //标题
                  Container(
                    padding: EdgeInsets.only(left: 7.w, top: 9.h),
                    child: MyText(e.desc ?? "", color: MyColours.textBlack, fontSize: 12.sp),
                  ),

                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        padding: EdgeInsets.only(left: 7.w, top: 9.h, bottom: 5.h),
                        child: MyText(e.name ?? "", color: MyColours.textGray, fontSize: 11.sp),
                      ),
                      const Spacer(),
                      Container(
                        padding: EdgeInsets.only(right: 7.w),
                        child: Row(
                          children: [
                            MyImage(imageName: "ic_distance", width: 12.w),
                            MyText(e.distanceStr ?? "", color: MyColours.textGray, fontSize: 11.sp),
                          ],
                        ),
                      )
                    ],
                  ),
                ],
              ))),
    );
  }
}
